<!--  -->
<template>
  <div>
    <el-tree
      :data="dataList"
      node-key="catId"
      :props="defaultProps"
      :default-expanded-keys="defaultExpandedKeys"
      :auto-expand-parent="true"
      @node-click="updateNode"
      show-checkbox
      @check-change="handleCheckChange"
    >
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
            v-show="node.level <= 2"
            type="text"
            size="mini"
            @click.stop="() => append(node, data)"
          >
            添加子节点
          </el-button>
          <el-button
            v-show="node.level > 2"
            type="text"
            size="mini"
            @click.stop="() => remove(node, data)"
          >
            删除子节点
          </el-button>
        </span>
      </span>
    </el-tree>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="菜单名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],
      defaultExpandedKeys: [],
      dialogVisible: false,
      isAdd: true,
      form: {
        sort: 0,
      },
      defaultProps: {
        value: "catId",
        label: "name",
        children: "children"
      },
    };
  },
  methods: {
    // 查询菜单树
    getTreeMenu() {
      this.$http({
        url: this.$http.adornUrl("/sky-mall-product/pmsCategory/list/tree"),
        method: "get",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.data;
        }
      });
    },
    // 增加节点（tree树增加，不发起请求）
    append(node, data) {
      this.dialogVisible = true;
      this.isAdd = true;
      this.form.name = null
      this.form.parentCid = data.catId;
      this.form.catLevel = data.catLevel + 1;
      this.defaultExpandedKeys = [node.data.catId];
    },
    // 删除节点
    remove(node, data) {
      this.$confirm(`是否删除${data.name}菜单？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(
            "/sky-mall-product/pmsCategory/delete?catId=" + data.catId
          ),
          method: "delete",
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message.success("删除成功");
            this.getTreeMenu();
            this.defaultExpandedKeys = [node.parent.data.catId];
          }
        });
      });
    },
    // 提交表单信息
    submitForm() {
      let url;
      if (this.isAdd) {
        this.form.catId = null;
        url = "/sky-mall-product/pmsCategory/add";
      } else {
        url = "/sky-mall-product/pmsCategory/update";
      }
      this.dialogVisible = false;

      this.$http({
        url: this.$http.adornUrl(url),
        data: this.$http.adornParams(this.form),
        method: "post",
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.getTreeMenu();
          if (this.isAdd) {
            this.$message.success("添加成功！");
          } else {
            this.$message.success("修改成功！");
          }
        }
      });
      this.form = {
        sort: 0,
      };
    },
    // 修改节点
    updateNode(data, node) {
      this.dialogVisible = true;
      this.form = {
        catId: data.catId,
        name: data.name,
      };
      this.isAdd = false;
      this.defaultExpandedKeys = [node.data.catId];
    },
    handleCheckChange(data){
      console.log(data)
    }
  },
  created() {
    this.getTreeMenu();
  },
};
</script>
